<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Browniu-cli 控制台</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <h3>Browniu cli</h3>
  <div class="panel">
    <button onclick="requireV()">NPM 版本号</button>
    <button onclick="requireP()">执行目录</button>
    <button onclick="requireB()">获取依赖包目录</button>
    <button onclick="requireJ('stylus')">判断是否安装stylus</button>
    <button onclick="requireI('stylus')">安装stylus</button>
    <button onclick="requireUi('stylus')">卸载stylus</button>
    <button onclick="requireUi('stylus')">洗洗睡</button>
  </div>
  <div class="view"></div>
</body>
<script>
  function requireV() {
    fetch('http://localhost:2333/version')
      .then(response => response.json())
      .then(json => {
        console.log(json)
        document.querySelector('.view').innerHTML = json.version
      })
  }

  function requireP() {
    fetch('http://localhost:2333/path')
      .then(response => response.json())
      .then(json => {
        console.log(json)
        document.querySelector('.view').innerHTML = json.data
      })
  }

  function requireJ(module) {
    fetch('http://localhost:2333/judge?module=' + module)
      .then(response => response.json())
      .then(json => {
        console.log(json)
        document.querySelector('.view').innerHTML = json.data
      })
  }

  function requireI(module) {
    fetch('http://localhost:2333/install?module=' + module)
      .then(response => response.json())
      .then(json => {
        console.log(json)
        document.querySelector('.view').innerHTML = json.data
      })
  }

  function requireUi(module) {
    fetch('http://localhost:2333/uninstall?module=' + module)
      .then(response => response.json())
      .then(json => {
        console.log(json)
        document.querySelector('.view').innerHTML = json.data
      })
  }

  function requireB() {
    fetch('http://localhost:2333/package')
      .then(response => response.json())
      .then(json => {
        document.querySelector('.view').innerHTML = ''
        if (!json.package.dependencies && !json.package.devDependencies) {
          document.querySelector('.view').innerHTML = 'null'
          return
        }
        if (!json.package.dependencies) json.package.dependencies = {}
        if (!json.package.devDependencies) json.package.devDependencies = {}
        console.log(json.package.dependencies)
        let packages = Object.keys(json.package.dependencies).concat(Object.keys(json.package.devDependencies))
        for (let i = 0; i < packages.length; i++) {
          const element = packages[i];
          let dom = document.createElement('span')
          dom.setAttribute('style',
            'display:inline-block;margin:5px 10px;padding:5px 15px;background:green;color:#fff;font-size:12px')
          dom.innerHTML = element
          document.querySelector('.view').appendChild(dom)
        }
      })
  }
</script>

</html>